<template>
  <div class="videoBox">
    <video v-if="!props.live && props.src" ref="video" class="video-js vjs-default-skin" :width="props.width"
      :height="props.height" controls>
      <source :src="props.src" />
    </video>
    <div v-else id="mui-player"></div>
  </div>
</template>
<script setup>
import { getCurrentInstance, nextTick, onMounted, watch } from 'vue';
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
import Flv from 'flv.js'
const props = defineProps({
  src: {
    type: String
  },
  live: { //是否直播
    type: Boolean,
    default: false
  },
  width: {
    type: [Number, String],
    default: '100%'
  },
  height: {
    type: [Number, String],
    default: '100%'
  },

})
const { proxy } = getCurrentInstance()
const video = ref(null)
const player = ref(null)
const option = {
  autoplay: true,
  controls: true,
  aspectRatio: '16:9',
  muted: false, //设置默认播放音频：true/false
}

// 直播的话
const init = () => {
  new MuiPlayer({
    container: '#mui-player',
    title: '标题',
    src: props.src,
    autoplay: true,
    width: props.width,
    height: props.height,
    objectFit: 'cover',
    parse: {
      type: 'flv',
      loader: Flv,
      config: {
        cors: true
      }
    }
  })
}

watch(() => props.src, (n, o) => {
  console.log(n, o);
  if (n) {
    if (props.live == false) {
      nextTick(() => {
        player.value = proxy.$video(video.value, option);
      })
    } else {
      init()
    }
  }
}, {
  immediate: true
}
)
onMounted(() => {
  if (props.live == false) {
    nextTick(() => {
      player.value = proxy.$video(video.value, option);
    })
  } else {
    init()
  }
})
</script>
<style scoped></style>

